<template>
	<n-scrollbar x-scrollable>
		<div class="header-row" :style="!isPC() && 'width: 1480px'">
			<div v-for="item in headers" :key="item">{{ t(item) }}</div>
		</div>
		<div
			v-for="(group, index) in vipGroups"
			:key="group.groupTitle"
			style="margin-top: 10px"
			@click="group.show = !group.show">
			<n-collapse accordion arrow-placement="right">
				<n-collapse-item :title="group.groupTitle" :name="group.groupTitle" :key="index">
					<template #header>
						<VipRow
							class="level-row"
							:top="true"
							:title="group.groupTitle"
							:icon="group.all.icon"
							:xp="group.all.xp"
							:features="group.all.features"
							:show="group.show"
							:lock="group.lock" />
					</template>

					<VipRow
						class="level-row"
						v-for="(level, levelIndex) in group.levels"
						:title="level.levelName"
						:key="levelIndex"
						:icon="level.icon"
						:xp="level.xp"
						:features="level.features" />
				</n-collapse-item>
			</n-collapse>
		</div>
	</n-scrollbar>
</template>

<script lang="ts" setup>
import { NCollapse, NCollapseItem } from 'naive-ui'
import VipRow from './VipRow.vue'

import { getRewardPage } from '@/api/activity.ts'
import { isPC, t } from '@/utils'
import { ref } from 'vue'

interface VipLevel {
	levelName: string
	icon: string
	xp: string
	features: (string | number)[]
}

interface VipGroup {
	groupTitle: string
	lock: boolean
	all: VipLevel
	show: boolean
	levels: VipLevel[]
	levelGroupId: string
}

const headers = [
	'vipTable.level',
	'vipTable.requiredXP',
	'vipTable.rewards',
	'vipTable.loyaltyBonus',
	'vipTable.earnPoints',
	'vipTable.xpMultiplier',
	'vipTable.lossRebate',
	'vipTable.vipService'
]
const vipGroups = ref<VipGroup[]>([])
;(async () => {
	try {
		const res: {
			data: {
				vipLevelRelations: Array<{
					vipLevels: Array<{
						bonusClaim: boolean
						levelName: string
						levelIcon: string
						levelGroupId: string
						expRequiredUpgrade: number
						expMultiplier: number
						statusUpgradeBonus: number
						statusInstantRebate: number
						statusWeeklyRebate: number
						statusMonthlyRebate: number
						statusLoyaltyRebate: number
						statusEarnPoint: number
						statusVipService: number
						statusLossReturnBonus: number
					}>
				}>
			}
		} = await getRewardPage({
			groupManageId: 'g1'
		})
		console.log(res.data, 'data')
		vipGroups.value = res.data.vipLevelRelations.map((item) => {
			const levels = item.vipLevels.map((level: any) => {
				return {
					levelName: level.levelName,
					icon: level.levelIcon,
					xp: level.expRequiredUpgrade,
					features: [
						level.statusUpgradeBonus ||
						level.statusInstantRebate ||
						level.statusWeeklyRebate ||
						level.statusMonthlyRebate
							? 'check'
							: '',
						level.statusLoyaltyRebate ? 'check' : '',
						level.statusEarnPoint ? 'check' : '',
						level.expMultiplier + 'x',
						level.statusLossReturnBonus ? 'check' : '',

						level.statusVipService ? 'check' : ''
					]
				}
			})
			const dict = {
				groupTitle: item.vipLevels[0].levelName,
				lock: item.vipLevels[0].bonusClaim,
				all: levels[0],
				levels: levels.slice(1),
				show: false,
				levelGroupId: item.vipLevels[0].levelGroupId
			}
			return dict
		}) as any[]
	} catch (e) {
		console.log(e)
	}
})()
</script>

<style scoped>
.header-row {
	display: flex;
	justify-content: space-between;
	min-width: 800px;
	overflow-x: auto;
}

.header-row > div {
	flex: 1;
	min-width: 100px;
	min-height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: pre-line;
	text-align: center;
	line-height: 1.2;
}

.header-row > div:first-child {
	min-width: 110px !important;
	justify-content: flex-start;
	padding-left: 40px;
}

.header-row > div:nth-of-type(2) {
	transform: translateX(-24px);
}

.header-row > div:nth-of-type(3) {
	transform: translateX(-24px);
}

.header-row > div:nth-of-type(4) {
	transform: translateX(-24px);
}

.header-row > div:nth-of-type(5) {
	transform: translateX(-24px);
}

.header-row > div:nth-of-type(6) {
	transform: translateX(-22px);
}

.header-row > div:nth-of-type(7) {
	transform: translateX(-20px);
}

.header-row > div:nth-of-type(8) {
	transform: translateX(-20px);
}

:deep(.n-collapse-item__header) {
	border-radius: 8px !important;
	background: #1b2538;
	padding: 0 !important;
}

:deep(.n-collapse-item-arrow) {
	display: none !important;
}

:deep(.n-collapse-item__header-main) {
	height: 52px;
}

:deep(.n-collapse-item) {
	margin: 0 !important;
}

:deep(.n-collapse) {
	margin: 0;
	border-radius: 8px !important;
	background: #1b2538;
}

/* 给 VipRow 组件的最后一个实例增加下边框圆角 */
.level-row:last-child {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	overflow: hidden;
}

/* 隐藏滚动条但保持滚动功能 */
:deep(.n-scrollbar-rail--horizontal) {
	display: none !important;
}

:deep(.n-scrollbar-rail--vertical) {
	display: none !important;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
	.header-row {
		width: 1480px;
		min-width: auto;
	}

	/* 隐藏滚动条但保持滚动功能 */
	::-webkit-scrollbar {
		display: none;
	}

	/* 兼容 Firefox */
	scrollbar-width: none;
}
</style>
